<template>
    <a-date-picker mode="year" format="YYYY" :open="isOpen" v-bind="bindValues" @panelChange="handleYearChange" @openChange="handleOpenChange" @change="handleChange" />
</template>

<script lang="ts">
import moment from 'moment';
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
    props: {
        value: {
            type: String,
            default: ''
        } // 初始值
    },
    emits: ['update:value', 'change'],
    setup(props, { emit, attrs }) {
        const isOpen = ref<boolean>(false);
        // 绑定属性
        const bindValues = computed(() => {
            // 默认日期
            const value = props.value ? moment(props.value, 'YYYY') : '';
            return {
                ...attrs,
                value
            };
        });
        // 改变面板内容回调
        const handleYearChange = (val) => {
            emit('update:value', moment(val).format('YYYY'));
            emit('change', moment(val).format('YYYY'));
            isOpen.value = false;
        };
        // 控制面板开关回调
        const handleOpenChange = (status: boolean) => {
            isOpen.value = status;
        };
        // 点击清空按钮回调
        const handleChange = (val) => {
            emit('update:value', val);
            emit('change', val);
        };
        return {
            isOpen,
            bindValues,
            handleYearChange,
            handleOpenChange,
            handleChange
        };
    }
});
</script>

<style scoped>
</style>